import React from 'react'
import UserForm from '../../../components/user-manage/UserForm'
import { Button, Modal, Table, Switch} from 'antd'
import { DeleteOutlined, EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
import { useState, useEffect,useRef } from 'react'
import axios from 'axios'
// import { Switch } from 'react-router'
const { confirm } = Modal;
export default function UserList() {
    // 页面数据
    const [dataSource, setdataSource] = useState([])
    // 添加用户对话框是否打开
    const [isOpen,setIsOpen] = useState(false)
    // 角色列表
    const [roleList, setRoleList]= useState([])
    // 区域列表
    const [regionList, setRegionList]= useState([])
    // 更新用户对话框是否打开
    const [isUpdateOpen,setisUpdateOpen] = useState(false)
    const [isUpdateDisabled, setisUpdateDisabled] = useState(false)

    // 需要被修改的用户id
    const [current, setcurrent] = useState(null)

    // 表单ref
    const addForm=useRef(null);
    const updateForm=useRef(null)

    // 确认添加用户
    const addFormOk=()=>{
        setIsOpen(false)
        // 通过ref得到表单数据
        addForm.current.validateFields().then(value=>{
            addForm.current.resetFields();
            // post到后端，生成id，再设置打他source，方便后面的删除和更新
            axios.post(`/users`,{
                ...value,
                "roleState": true,
                "default": false,
            }).then(res=>{
                // console.log(res.data);
                // 重新渲染页面数据
                setdataSource([...dataSource,{
                    ...res.data,
                    role:roleList.filter(item=>item.id===value.roleId)[0]
                }])
            })
        }).catch(err=>{
            console.log(err);
        })
    }

    const {roleId,region,username}=JSON.parse(localStorage.getItem("token"))

    // 获取用户列表数据
    useEffect(() => {
        axios.get("/users?_expand=role").then(res => {
            const list=res.data;
            // 超级管理员roleId为1，区域管理员roleId为2，且只能查看自己和roleId为3的用户
            setdataSource(roleId===1 ? list:[
                ...list.filter(item=>item.username===username),
                ...list.filter(item=>item.region===region && item.roleId===3)
            ]);
        })
    }, [roleId,region,username])
    
    // 获取角色列表
    useEffect(() => {
        axios.get("/roles").then(res => {
            setRoleList(res.data);
        })
    }, [])
    
    // 获取区域列表
    useEffect(() => {
        axios.get("/regions").then(res => {
            setRegionList(res.data);
        })
    }, [])
    
    // 确认删除对话框
    const confirmMethods = (item) => {
        confirm({
            title: '您确定要删除吗？',
            icon: <ExclamationCircleOutlined />,
            content: '',
            
            onOk() {
                deleteMethod(item);
            },
            
            onCancel() {
                
            },
        });
    }
    //删除用户
    const deleteMethod = (item) => {
        // 过滤掉要删除的项目
        setdataSource(dataSource.filter(data=>data.id!==item.id))
        
        axios.delete(`/users/${item.id}`);
    }
    
    
    // 更改用户状态
    const handleChange=(item)=>{
        // 修改页面状态数据
        item.roleState = !item.roleState;
        setdataSource([...dataSource])
        
        // 修改后台状态
        axios.patch(`/users/${item.id}`,{
            roleState:item.roleState
        })
    }
    
    // 修改用户信息
    const handleUpdate= (item) =>{
        setcurrent(item);
        // 变成同步触发
        setisUpdateOpen(true);
        setTimeout(()=>{
        // 把表格数据传入表单中,如果编辑的是超级管理员传入禁用
        if(item.roleId===1){
            setisUpdateDisabled(true)
        }else{
            setisUpdateDisabled(false)
        }
        updateForm.current.setFieldsValue(item)
        },0)
    }
    // 确认修改用户信息
    const updateFormOk=()=>{
        updateForm.current.validateFields().then(value=>{
        //  修改页面用户信息
            setisUpdateOpen(false)
            setdataSource(dataSource.map(item=>{
                if(item.id===current.id){
                    return{
                        ...item,
                        ...value,
                        role:roleList.filter(data=>data.id===value.roleId)[0]
                    }
                }
                return item
            }))
            setisUpdateDisabled(!isUpdateDisabled)

        // 修改后台用户信息
        axios.patch(`/users/${current.id}`,value)
        }).catch(res=>{
            // console.log(res);
        })
    }
    const columns = [
        {
            // 列表标题
            title: '区域',
            //   列表内容名称
            dataIndex: 'region',
            filters:[
                ...regionList.map(item=>{
                    return {
                        text:item.title,
                        value:item.value
                    }
                }),
                {
                    text:'全球',
                    value:''
                }
            ],
            onFilter: (value, item) => item.region === value,
            render: (region) => {
                return <b>{region === "" ? "全球" : region}</b>
            }
        },
        {
            title: '角色名称',
            dataIndex: 'role',
            render: (role) => {
                return role?.roleName
            }
        },
        {
            title: '用户名',
            dataIndex: 'username',
        },
        {
            title: '用户状态',
            dataIndex: 'roleState',
            render: (roleState, item) => {
                // 开关状态按钮
                return <Switch checked={roleState} disabled={item.default}
                onChange={()=>handleChange(item)}></Switch>
            }
        },
        {
            title: '操作',
            render: (item) => {
                return (
                    <div>
                        {/* 删除按钮 */}
                        <Button danger shape="circle" icon={<DeleteOutlined />}
                            onClick={() => confirmMethods(item)}
                            disabled={item.default}></Button>
                        {/* 修改按钮 */}
                        <Button type="primary" shape="circle" icon={<EditOutlined />}
                            disabled={item.default}
                            onClick={()=>handleUpdate(item)}
                        ></Button>
                    </div>
                )
            }
        }
    ];
    return (
        <div>
            {/* 按钮区域 */}
            <Button type="primary" style={{marginBottom:'20px'}} onClick={()=>{
                setIsOpen(true)
            }}>添加用户</Button>
            {/* 表格区域 */}
            <Table dataSource={dataSource} columns={columns}
                rowKey={(item) => item.id}
                pagination={{
                    pageSize: 6
                }} />

            {/* 添加用户对话框 */}
            <Modal
                open={isOpen}
                title="添加用户"
                okText="确定"
                cancelText="取消"
                onCancel={()=>{
                    setIsOpen(false);
                    addForm.current.resetFields();
                }}
                onOk={()=>addFormOk()}
            >
                {/* 表单 */}
                {/* 通过ref和表单数据连接 */}
                <UserForm ref={addForm} regionList={regionList} roleList={roleList}/>
            </Modal>
            {/* 修改用户信息对话框 */}
            <Modal
                open={isUpdateOpen}
                title="更新用户"
                okText="更新"
                cancelText="取消"
                onCancel={()=>{
                    setisUpdateOpen(false);
                    // updateForm.current.resetFields();
                    setisUpdateDisabled(!isUpdateDisabled)
                }}
                onOk={()=>updateFormOk()}
            >
                {/* 表单 */}
                {/* 通过ref和表单数据连接 */}
                <UserForm ref={updateForm} regionList={regionList} roleList={roleList}
                isUpdateDisabled={isUpdateDisabled}
                isUpdate={true}/>
            </Modal>
        </div>
    )
}
